<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>幸运大转盘</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/mui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/kinerLottery.css" />
   	<link rel="stylesheet" href="../css/luck_draw.css"/>
</head>
<body>
	<div class="main-box">
		<div class="content-box">
			<div class="title-box">
				<i class="left"></i>
				<h3>活动说明</h3>
				<i class="right"></i>
			</div>
			<div class="activity-description">
				<div class="content-text">
					<p>活动时间：7月1日-7月30日</p>
					<p>每日签到可获1次抽奖机会</p>
					<p>每日邀请好友参与可获1次抽奖机</p>
				</div>
			</div>
			<div class="draw">
				<div id="box" class="box">
			        <div class="outer KinerLottery KinerLotteryContent"><img src="../images/lucky.png"></div>
			        <!-- 大专盘分为三种状态：活动未开始（no-start）、活动进行中(start)、活动结束(completed),可通过切换class进行切换状态，js会根据这3个class进行匹配状态 -->
			        <div class="inner KinerLotteryBtn start"></div>
			    </div>
			    <div class="ellipes"></div>
		    </div>
		    <div class="title-box diffrent">
				<i class="left"></i>
				<h3>中奖纪录</h3>
				<i class="right"></i>
			</div>
			<div class="win-box">
				<div class="win-img">
					<img src="../images/luck-people.png" alt="" />
				</div>
				<div class="win-text">
					<span class="span-left">雨中漫步</span>
					<span class="span-right">7月1日  21：25</span>
					<p>日邀请好友参与可获1次抽奖机</p>
				</div>
			</div>
		</div>
	</div>
    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/zepto.min.js"></script>
    <script src="../js/kinerLottery.js"></script>
    <script type="text/javascript">
    	mui.init();
    </script>
    <script>
    /**
     * 根据转盘旋转角度判断获得什么奖品
     * @param deg
     * @returns {*}
     */
    var whichAward = function(deg) {

        if ((deg > 0 && deg <= 40)) { //10M流量
            return "被褥";
        } else if ((deg > 40 && deg <= 80)) { //IPhone 7
            return "现金红包";
        } else if ((deg > 80 && deg <= 120)) { //30M流量
            return "高压锅";
        } else if ((deg > 120 && deg <= 160)) { //5元话费
            return "插座";
        } else if ((deg > 160 && deg <= 200)) { //IPad mini 4
            return "机顶盒2";
        } else if ((deg > 200 && deg <= 240)) { //20元话费
            return "现金红包";
        } else if ((deg > 240 && deg <= 280)) { //20元话费
            return "相框";
        } else if ((deg > 280 && deg <= 320)) { //20元话费
            return "抵用券";
        } else if ((deg > 320 && deg <= 360)) { //20元话费
            return "机顶盒1";
        }

    }


    var KinerLottery = new KinerLottery({
        rotateNum: 8, //转盘转动圈数
        body: "#box", //大转盘整体的选择符或zepto对象
        direction: 0, //0为顺时针转动,1为逆时针转动

        disabledHandler: function(key) {

            switch (key) {
                case "noStart":
                    alert("活动尚未开始");
                    break;
                case "completed":
                    alert("活动已结束");
                    break;
            }

        }, //禁止抽奖时回调

        clickCallback: function() {

            //此处访问接口获取奖品
            function random() {
                return Math.floor(Math.random() * 360);
            }


            this.goKinerLottery(random());

        }, //点击抽奖按钮,再次回调中实现访问后台获取抽奖结果,拿到抽奖结果后显示抽奖画面

        KinerLotteryHandler: function(deg) {

                alert("恭喜您获得:" + whichAward(deg));


            } //抽奖结束回调
    });
    </script>
</body>
</html>
